<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .outer {
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .inner {
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
</style>

<body>
    <ul class="list">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <button class="btn">添加元素</button>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <script>
        /* 需求：点击每一个li都能在控制台输出 海旭别怕，武烁来了 */
        /* 获取所有的li */
        var liNode = document.querySelectorAll('li');
        var btn = document.querySelector('.btn');
        var list = document.querySelector('.list');
        console.log(list);
        // 给每一个li绑定一个点击事件
        for (var i = 0; i < liNode.length; i++) {
            liNode[i].onclick = function () {
                console.log('海旭别怕，武烁来了');
            }
        }
        // 需求：点击btn给ul添加一个子元素<li>444</li>
        btn.onclick = function () {
            console.log('111');
            // list.appendChild('<li>444</li>');
            var liNode = document.createElement('li');
            liNode.innerText = '444';
            console.log(liNode);
            // list.insertBefore(liNode);
            list.appendChild(liNode);
        }

        // 事件委托   将事件委托给父元素，子元素触发事件后，通过事件冒泡  ，去触发父元素上的事件
        // 事件冒泡
        document.querySelector('.outer').onclick = function () {
            console.log('outer')
        }
        document.querySelector('.inner').onclick = function () {
            console.log('inner');
        }

        document.querySelector('.list').onclick = function (e) {
            // 触发事件的元素
            console.log(e.target);
            console.log('list test 事件委托')
        }
        // 还可以给将来的元素添加事件
    </script>
</body>

</html>